<template>
    <video data-v-73443695=""  src="http://chst.vip:8081/crm/media/bg-video.d2d602a9.mp4
" loop muted autoplay  class="video"></video>
    <div class="formdiv">
        <h1 data-v-73443695="" class="title">{{pageInfo.title}}</h1>
       <!-- 动态组件 -->
       <component :is="pageInfo.component"></component>
        <div class="toggle">
          <svg class="icon" aria-hidden="true">
              <use :xlink:href="icon"></use>

          </svg>
          <b @click="handleToggle">{{pageInfo.toggleDes}}</b>
        </div>
    </div>
  </template>
  <script setup>
  import commonLogin from "../../components/login/commonLogin.vue"
  import smsLogin from "../../components/login/sms.vue"
  import {ref,watchEffect,markRaw,computed} from "vue"
  //markRwo可以将响应式的ref变成常规对象
  //声明一个页面数据
  let pageInfo=ref({
    title:'crm系统',//标题
    loginType:'common',//登入类型 commonLogin/smsLogin
    toggleDes:'点击切换手机登入',//切换的描述信息
    component:markRaw(commonLogin) //要切换的组件
  })
  //用于标记是否常规登入
  let isCommonLogin=ref(true)
  //点击切换登入方式
  let handleToggle=()=>{
       isCommonLogin.value=!isCommonLogin.value
  }
  //通过结合高级侦听器和vue3的动态组件来实现组件切换
  
  //vue3的动态组件，通过:is结合 component这个组件来实现动态切换

  watchEffect(()=>{
    //常规登入
    if(isCommonLogin.value){
      pageInfo.value={
    title:'crm系统',//标题
    loginType:'common',//登入类型 commonLogin/smsLogin
    toggleDes:'点击切换手机登入',//切换的描述信息
    component:markRaw(commonLogin) //要切换的组件
      }
    }else{
      //手机短信登入
      pageInfo.value={
    title:'短信登入',//标题
    loginType:'sms',//登入类型 commonLogin/smsLogin
    toggleDes:'使用用户密码登入',//切换的描述信息
    component:markRaw(smsLogin) //要切换的组件
  }
    }
  })

  //根据登入模式的切换，派发图标的名称
  let icon=computed(()=>{
     return isCommonLogin.value ? '#icon-iphone' : '#icon-icon-test'
  })
</script>
  
<style lang="scss">
//定制组件，修改样式的思路
//1.找到对应组件结构的类名
//2.重新编写样式，覆盖原来的样式

//样式修改不成功的因素和解决方案
//1.确认类名是否正确
//2.确认权重是否足够  !important
//3.是否需要使用深度选择器   xx :deep(选择器)
.video{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.formdiv{
  
    height: 583px;
    width: 400px;
    color: #fff;
    
    background-color: rgba(27, 25, 25,.4);
    // display: flex;
    // align-items: center;
    position: relative;
    top: 100px;
    left: 450px;
   
    .title{
        position: absolute;
        left: 140px;
        top: 50px;
    }
    .toggle{
       position: absolute;
       display: flex;
       align-items: center;
       justify-content: center;
       left: 140px;
       bottom: 100px;
       color: rgb(251, 250, 250);
       cursor: pointer;
    }
    .el-form{
        position: absolute;
        top: 170px;
        left: -20px;   
     }
}
.el-form-item__label{
   color: #fff;
 }
.username-form-item{
      .el-input{
           width: 250px !important;
        //    position: absolute;
        // height: 45px;
        // margin-bottom: 10px;
      }
}
.password-form-item{
      .el-input{
           width: 250px !important;
          //  height: 45px;
      }
}
.captcha-form-item{
      .el-input{
           width: 125px !important;
          //  height: 45px;
          border: none ;
          
           
      }
      .imgcaptcha{
        width: 125px !important;
        background-color: #fff;
        height:31px !important;
        box-shadow: 0 0 0 1px #dcdfe6;    
        border-radius:0 3px 3px 0 ;
        cursor: pointer;
        // margin: 10px 0;
      }
}

.el-input__wrapper{
  box-shadow: none;
 
  // border-radius: 5px 0 0 5px !important;
  border-top-right-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
}
 .el-button--primary{
    // width: 250px !important;
    height: 30px;
    // margin-top: 20px;
   
 }
 .icon{
           height: 2em;
           width: 2em;
       }
       .el-form-item.is-error .el-input__wrapper{
 box-shadow: none;
 }
.el-input__wrapper:hover{
 box-shadow: none;
}
.el-input__wrapper.is-focus{
 box-shadow: none;
}
</style>